<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Grid based layout</title>
    <style type="text/css">
      :root {
        --bg-color: #659494;
        --text-color: #fff;
        --size-large: 100px;
        --size-small: 20px;
      }

      div {
        background: var(--bg-color);
        color: var(--text-color);
        text-align: center;
        margin: var(--size-small);
        padding: var(--size-large);
      }

      section {
        display: grid;
        grid-template-columns: auto auto auto auto;
      }
    </style>
  </head>
  <body>
    <section>
      <div>product 1</div>
      <div>product 2</div>
      <div>product 3</div>
      <div>product 4</div>
      <div>product 5</div>
      <div>product 6</div>
      <div>product 7</div>
      <div>product 8</div>
    </section>
  </body>
</html>
